<template>
  <div style="width: 1500px">
    <el-form :model="getAlarmMaskState" ref="getAlarmMaskState" label-width="60px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="网元" prop="me">
            <el-input v-model="getAlarmMaskState.me" readonly></el-input>
            <el-select
                v-model="getAlarmMaskState.me"
                v-show="false"
                placeholder="请选择">
              <el-option v-for="(nodeName,index) in nodeList"
                         :key="index"
                         :value="nodeName['node-id']">
                <span style="float: left">{{ nodeName['node-id'] }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                    nodeName['netconf-node-topology:connection-status']
                  }}</span>
              </el-option>
            </el-select>
            <!--            <el-select v-model="getAlarmMaskState.objectName.me" placeholder="请选择网元" style="width: 100%">-->
            <!--              <el-option value="otna"></el-option>-->
            <!--              <el-option value="网元-2"></el-option>-->
            <!--            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单板" prop="eq">
            <el-input v-model="getAlarmMaskState.eq" v-show="isEq" readonly></el-input>
            <el-select v-model="getAlarmMaskState.eq" v-show="!isEq" placeholder="请选择单板" clearable style="width: 100%">
              <el-option
                  v-for="(i,index) in eqs"
                  :key="index"
                  :value="i.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="端口" prop="port">
            <el-input v-model="getAlarmMaskState.port" v-show="isPtp" readonly></el-input>
            <el-select v-model="getAlarmMaskState.port" v-show="!isPtp" placeholder="请选择端口" clearable
                       style="width: 100%">
              <el-option
                  v-for="(i,index) in ptps"
                  :key="index"
                  :value="i.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4">
           <el-form-item label="代码" prop="alarmCode">
             <el-select v-model="getAlarmMaskState.alarmCode" placeholder="请选择" clearable style="width: 100%">
               <el-option value="端口-1-1"></el-option>
               <el-option value="端口-2-1"></el-option>
               <el-option value="端口-3-1"></el-option>
               <el-option value="端口-4-1"></el-option>
               <el-option value="端口-5-1"></el-option>
             </el-select>
           </el-form-item>
         </el-col>-->
        <!--        <el-col :span="4">
                  <el-form-item label="类型" prop="objectType">
                    <el-select v-model="getAlarmMaskState.objectType" placeholder="请选择" clearable style="width: 100%">
                      <el-option value="网元"></el-option>
                      <el-option value="单板"></el-option>
                      <el-option value="端口"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>-->

        <el-col :span="6">
          <el-form-item label-width="0">
            <el-button type="primary" @click="getMask">刷新</el-button>
            <el-button @click="resetForm('getAlarmMaskState')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        :data="alarmMaskState['alarm-mask-states']['alarm-mask-state'].slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :current-page.sync="currentPage"
        :stripe="stripe"
        style="width: 100%;;margin:0 auto;">



      <el-table-column
          fixed
          sortable
          prop="object-name"
          label="对象名称">
      </el-table-column>
      <el-table-column
          prop="alarm-code"
          label="告警代码">
      </el-table-column>
      <el-table-column
          prop="object-type"
          label="告警类型">
      </el-table-column>

      <el-table-column
          prop="mask-state"
          label="屏蔽状态"
          :filters="[{ text: '是', value: true }, { text: '否', value: false }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row['mask-state'] ? 'primary' : 'success'"
              disable-transitions>{{ scope.row['mask-state'] ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>

      <!--      <el-table-column-->
      <!--          align="right">-->
      <!--        <template slot="header" slot-scope="scope">-->
      <!--          <el-input-->
      <!--              v-model="search"-->
      <!--              size="mini"-->
      <!--              placeholder="输入关键字搜索"/>-->
      <!--        </template>-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--              size="mini"-->
      <!--              @click="handleEdit(scope.$index, scope.row)">Edit-->
      <!--          </el-button>-->
      <!--          <el-button-->
      <!--              size="mini"-->
      <!--              type="danger"-->
      <!--              @click="handleDelete(scope.$index, scope.row)">Delete-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->


    </el-table>
    <div class="pagination" style="line-height:0px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item>
            <el-input placeholder="请输入告警代码关键字进行查询" style="margin-top: 5px"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label-width="0">
            <el-button type="primary" @click="getMask" style="float: right;margin-right: 50px;margin-top: 5px">保存
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
  </div>

</template>

<script>
import axios from "axios";
import {mask} from "@/assets/config/AlarmMaskConfig";

export default {
  name: "AlarmsMaskState",
  data() {
    return {
      //消息传输相关
      level: '',
      eqs: [],
      ptps: [],

      isEq: false,
      isPtp: false,

      //表格相关
      stripe: true,//是否为斑马纹 table
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      ///////////////
      objectType: ['PTP', 'ME'],
      nodeList: [{
        'node-id': '',
        'netconf-node-topology:connection-status': '',
        'netconf-node-topology:port': '',
        'netconf-node-topology:host': '',
      }],
      getAlarmMaskState: {
        me: '',
        eq: '',
        port: '',
        alarmCode: "OPTI_LOS",
        objectType: "",
      },
      search: '',
      alarmMaskState: mask,
      /*      alarmMaskState: {
              'alarm-mask-states': {
                'alarm-mask-state': [{
                  "object-name": "PTP=/shelf=1/slot=8/subslot=1/port=101",
                  "alarm-code": "OPTI_LOS",
                  "object-type": "PTP",
                  "mask-state": true

                }]
              }
            }*/

    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getMask() {
      if (this.getAlarmMaskState.me !== '') {
        axios.get("/node/" + this.getAlarmMaskState.me + "/alarm/mask").then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("获取-网元【 " + this.getAlarmMaskState.me + "】告警屏成功");
              this.alarmMaskState = response.data;
              this.total = this.alarmMaskState["alarm-mask-states"]["alarm-mask-state"].length;
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
      } else {
        this.$message.warning("请选择节点后再进行操作 ！")
      }

    },
    filterTag(value, row) {
      return row['mask-state'] === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  watch: {
    level: {
      immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue, oldValue) {
        console.log('点击层级变化了', newValue, oldValue)

        switch (newValue) {
          case 1:
            this.$bus.$on("node-name", (data) => {
              this.getAlarmMaskState.me = data;
            });
            this.$bus.$on("node:eqs", (data) => {
              this.eqs = data;
              console.log("--->", this.eqs)
            });
            this.getAlarmMaskState.eq = '';
            this.isEq = false;
            this.isPtp = false;
            break;
          case 2:
            this.$bus.$on("node-name", (data) => {
              this.getAlarmMaskState.me = data;
            });
            this.$bus.$on("node:eqs", (data) => {
              this.eqs = data;
            });
            this.getAlarmMaskState.eq = '';
            this.isEq = false;
            this.isPtp = false;
            break;
          case 3:
            this.$bus.$on("node-name", (data) => {
              this.getAlarmMaskState.me = data;
            });
            this.$bus.$on("slot-name", (data) => {
              this.getAlarmMaskState.eq = data;
              console.log('槽位信息:', data);
            });
            this.$bus.$on("node:eqs:ptps", (data) => {
              console.log('端口信息:', data);
              this.ptps = data;
            });
            this.getAlarmMaskState.port = '';
            this.isEq = true;
            this.isPtp = false;
            break;
          case 4:
            this.$bus.$on("node-name", (data) => {
              this.getAlarmMaskState.me = data;
            });
            this.$bus.$on("slot-name", (data) => {
              this.getAlarmMaskState.eq = data;
              console.log('槽位信息:', data);
            });

            this.$bus.$on("ptp-name", (data) => {
              this.getAlarmMaskState.port = data;
            });
            this.isEq = true;
            this.isPtp = true;
            // this.ptps = [];


            break;

        }

      }
    }
  },
  mounted() {
    this.total = this.alarmMaskState["alarm-mask-states"]["alarm-mask-state"].length;
    this.$bus.$on('node-info', (data) => {
      console.log("Alarm mask 页收到的信息为： ", data)
      this.nodeList = data;
    })
    this.$bus.$on('node-name', (data) => {
      console.log("收到的信息为： ", data)
      this.getAlarmMaskState.me = data;
    })
    this.$bus.$on('level', (data) => {
      console.log("告警屏蔽模块 - 所点击层级为：", data)
      this.level = data;
    })
  }
}
</script>

<style scoped>

</style>